<template>
  <div id="app">
    <v-app id="inspire">
      <v-content>
        <v-container fluid fill-height>
          <v-layout align-center justify-center>
            <v-flex xs12 sm8 md4>
              <v-card class="elevation-12">
                <v-toolbar dark color="primary">
                  <v-toolbar-title>通用租赁系统</v-toolbar-title>
                </v-toolbar>
                <v-card-text>
                  <v-form>
                    <v-text-field
                        prepend-icon="person"
                        name="login"
                        label="用户名"
                        type="text"
                        v-model="username"
                    ></v-text-field>
                    <v-text-field
                        prepend-icon="lock"
                        name="password"
                        label="密码"
                        id="password"
                        type="password"
                        v-model="password"
                    ></v-text-field>
                    <p class="pl-4 error--text">{{ errorMsg }}</p>
                  </v-form>
                </v-card-text>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="primary" @click="retrieveToken" :disabled="isRetrievingToekn">{{btnMsg}}</v-btn>
                </v-card-actions>
              </v-card>
            </v-flex>
          </v-layout>
        </v-container>
      </v-content>
    </v-app>
  </div>
</template>
<script>
  import {mapState, mapMutations, mapGetters, mapActions} from 'vuex'

  export default {
    methods: {
      retrieveToken() {
        this.isRetrievingToekn = true
        this.$store
            .dispatch('app/retrieveToken', {
              username: this.username,
              password: this.password
            })
            .then(res => {
              this.errorMsg = ''
              this.isRetrievingToekn = false
              this.$store.dispatch('app/me').then(() => this.$router.push({name: 'Dashboard'}))


            })
            .catch(err => {
              this.isRetrievingToekn = false
              if (err.response.status == 401) {
                this.errorMsg = '登录信息错误'
              }
            })
      }
    },
    computed: {
      btnMsg() {
        return this.isRetrievingToekn ? '登录中...' : '登录'
      }
    },
    props: [],
    watch: {},
    components: {},
    events: {},
    data() {
      // TODO remove for debug
      return {
        isRetrievingToekn: false,
        username: 'admin@example.com',
        password: 'password',
        errorMsg: ''
      }
    },
    mounted() {
    }
  }
</script>
<style scoped>
  .v-application {
    background: url('/static/bg/20.jpg') !important;
    background-size: cover !important;
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-transition-delay: 99999s;
    -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
  }
</style>